<template>
  <div class="follow-plus bg-primary" @click.stop="follow"></div>
</template>

<script setup>
import { ref } from 'vue'
import { useAccountStore } from '@/store/account'
import { usePopupMessageStore } from '@/store/popup-message'
import { $t } from '@/i18n'
import { notifyFollow } from '@/utils/state-broadcast'
import { FOLLOW_UPDATE } from '@/constant'
import { trackEvent } from '@/gtm'
import API from '@/http'

const props = defineProps({
  userId: { type: Number },
  feedId: { type: Number },
})

const sending = ref(false)

const { afterLoginAction } = useAccountStore()
const follow = afterLoginAction($follow)
const { open } = usePopupMessageStore()
function $follow() {
  if (sending.value) return

  sending.value = true
  API.Follow.update({
    data: {
      type: FOLLOW_UPDATE.FOLLOW,
      aff_follow: props.userId,
    },
  })
    .then(() => {
      notifyFollow(props.userId, true)
      open($t('info.followSuccess'))
    })
    .catch((e) => console.warn('Toggle follow fail: ', e))
    .finally(() => (sending.value = false))

  trackEvent({ key: 6, meta: { id: props.feedId, aff: props.userId } })
}
</script>

<style lang="scss" scoped>
.follow-plus {
  width: 1.125rem;
  height: 1.125rem;
  border: 0.0625rem solid #fff;
  border-radius: 1.125rem;
  position: relative;

  &::before,
  &::after {
    content: '';
    width: 0.625rem;
    height: 0.09375rem;
    border-radius: 0.25rem;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  &::before {
    transform: translate(-50%, -50%);
  }
  &::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
</style>
